<template>
  <div class="app-container">
    <breadcrumb-nav>
      <template v-slot:firstMenu>订单管理</template>
      <template v-slot:secondMenu>发货信息</template>
    </breadcrumb-nav>
    <div class="table-container">
      <el-table ref="deliverOrderTable"
                style="width: 100%;"
                :data="list" border>
        <el-table-column label="订单编号" width="180" align="center">
          <template slot-scope="scope">{{scope.row.orderSn}}</template>
        </el-table-column>
        <el-table-column label="收货人" width="180" align="center">
          <template slot-scope="scope">{{scope.row.consignee}}</template>
        </el-table-column>
        <el-table-column label="手机号码" width="160" align="center">
          <template slot-scope="scope">{{scope.row.mobile}}</template>
        </el-table-column>
        <el-table-column label="收货地址" align="center">
          <template slot-scope="scope">{{scope.row.address}}</template>
        </el-table-column>
        <el-table-column label="配送方式" width="160" align="center">
          <template slot-scope="scope">
            <el-select placeholder="请选择物流公司"
                       v-model="scope.row.deliveryCompany"
                       size="small">
              <el-option v-for="item in companyOptions"
                         :key="item"
                         :label="item"
                         :value="item">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="物流单号" width="180" align="center">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.deliverySn"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px;text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm" type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import BreadcrumbNav from '../../common/BreadcrumbNav'
import { deliveryOrder } from '../../../network/order'
const defaultLogisticsCompanies = ['顺丰快递', '圆通快递', '中通快递', '韵达快递']
export default {
  name: 'OrderDelivery',
  components: {
    BreadcrumbNav
  },
  data () {
    return {
      list: [],
      companyOptions: defaultLogisticsCompanies
    }
  },
  created () {
    this.list = this.$route.query.list
    // 当list不为数组时转换为数组
    if (this.list instanceof Array === false) {
      this.list = []
    }
  },
  methods: {
    cancel () {
      this.$router.back()
      this.$message({
        type: 'info',
        message: '已取消发货'
      })
    },
    confirm () {
      this.$confirm('是否要进行发货操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('----this.list:', this.list)
        if (this.list.length <= 0) {
          return this.alertMessage('发货失败, 没有发货信息', 'error')
        }
        if (this.list[0].deliveryCompany.length === 0 || this.list[0].deliveryCompany.length === 0) {
          return this.alertMessage('发货失败, 请填写快递信息', 'error')
        }
        const deliveryItem = {
          orderId: this.list[0].orderId,
          Status: 2, // 已发货，待收货
          deliveryCompany: this.list[0].deliveryCompany,
          deliverySn: this.list[0].deliverySn
        }
        deliveryOrder(deliveryItem).then(res => {
          if (res.status !== 200) {
            return this.alertMessage('发货失败', 'error')
          }
          this.$router.back()
          this.$message({
            type: 'success',
            message: '发货成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发货'
        })
      })
    }
  }
}
</script>
<style></style>
